<!-- 励志短语 -->
<template>
  <div class="box">
    <div class="hentiao">短语</div>
    <span class="tetx">{{ list }}</span>
  </div>
</template>

<script>
import { phrase } from '@/data/phrase.js'
export default {
  data() {
    return {
      list: phrase
    }
  },
  created() {
    const max = this.list.length
    const maths = Math.floor(Math.random() * (max - 0 + 1)) + 0
    this.list = phrase[maths]
  }
}
</script>

<style lang="less" scoped>
@font-face {
  font-family: fontbobo;
  src: url(@/font/BOBOHEI-2.otf);
}
.box {
  position: relative;
  margin-top: 20px;
  height: 150px;
  width: 250px;
  border-radius: 10px;
  box-shadow: -3px 2px 6px 1px #8b8b8b;
  background-color: #faffb8;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.tetx {
  padding: 10px;
  color: #242424;
  font-size: 20px;
  font-family: 'fontbobo';
}
.hentiao {
  position: absolute;
  height: 100px;
  width: 20px;
  background-color: rgb(255, 183, 183);
  top: -30px;
  left: 15px;
  color: #fefefe;
  transform: rotate(45deg);
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 2px;
}
</style>
